import React from 'react'
import '../scss/jingli.scss'

class jing extends React.Component {
    constructor() {
        super()
        this.state = {
            // 公司名称
            company: '',
            // 职场名称
            jobTitle: '',
            //汇报对象:
            reportObject: '',
            //管理 人数
            people: '',
            //文本一
            text1: '',
            // 月销售额
            monthly: '',
            //年销售额
            turnover: '',
            //文本二
            text2: ''

        }
    }
    //修改数据
    setNum({ target }) {
        let name = target.name
        this.setState({
            [name]: target.value
        })
    }
    //保存
    save() {
        const { company, jobTitle, reportObject, people, text1, monthly, turnover, text2 } = this.state;
        console.log(
            '公司名称' +
            company,
            '职场名称' +
            jobTitle,
            '汇报对象' +
            reportObject,
            '管理 人数' +
            people,
            '文本一' +
            text1,
            '月销售额' +
            monthly,
            '年销售额' +
            turnover,
            '文本二' +
            text2
        )

    }
    render() {
        const { company, jobTitle, reportObject, people, text1, monthly, turnover, text2 } = this.state
        return (
            <>
                <div className='box'>
                    <div className='jing'>
                        <div className='top'>
                            <div className='top-text'>
                                <h2>
                                    工作经历
                            </h2>
                            </div>
                        </div>
                        <div className='main'>
                            <div className='input'>
                                <input type="text" placeholder='公司名称' style={{ marginRight: '7px' }} name='company' value={company} onChange={(e) => this.setNum(e)} />
                                <input type="text" placeholder='职位名称' name='jobTitle' value={jobTitle} onChange={(e) => this.setNum(e)} />
                            </div>
                            <div className='select'>
                                <select name="" id="" style={{ margin: '0px' }}>
                                    <option value="year">开始年份</option>
                                    <option value="year">1</option><option value="year">2</option>
                                    <option value="year">3</option><option value="year">4</option>
                                    <option value="year">5</option><option value="year">6</option>
                                </select>
                                <select name="" id="">
                                    <option value="year">开始月份</option>
                                    <option value="year">1</option><option value="year">2</option>
                                    <option value="year">3</option><option value="year">4</option>
                                    <option value="year">5</option><option value="year">6</option>
                                </select>
                                <select name="" id="">
                                    <option value="year">结束年份</option>
                                    <option value="year">1</option><option value="year">2</option>
                                    <option value="year">3</option><option value="year">4</option>
                                    <option value="year">5</option><option value="year">6</option>
                                </select><select name="" id="">
                                    <option value="year">结束月份</option>
                                    <option value="year">1</option><option value="year">2</option>
                                    <option value="year">3</option><option value="year">4</option>
                                    <option value="year">5</option><option value="year">6</option>
                                </select>
                            </div>
                            <div className='guanli'>
                                <div className='gl_table'>
                                    <input type="checkbox" />
                                    <span>管理岗位</span>
                                </div>
                                <div className='input'>
                                    <input type="text" placeholder='汇报对象' style={{ marginRight: '7px' }} name='reportObject' value={reportObject} onChange={(e) => this.setNum(e)} />
                                    <input type="text" placeholder='管理人数' name='people' value={people} onChange={(e) => this.setNum(e)} />
                                </div>
                                <div className='input_text'>
                                    <textarea name="text1" id="" placeholder='从招聘，培训，团队建设，销售目标等角度描述管理方面的成绩' cols="80" rows="5" value={text1} onChange={(e) => this.setNum(e)}></textarea>
                                </div>
                            </div>
                            {/* 让数据说话 */}
                            <div className='shujushuo'>
                                <div className='sjs_text'>
                                    让数据说话，快来展示你的傲人业绩吧~
                                </div>
                                <div className='sjs-input'>
                                    <div className='sjs-input-box'>
                                        <input type="text" placeholder='月销售额' className='left' name='monthly' value={monthly} onChange={(e) => this.setNum(e)} />
                                        <span className='right'>万元</span>
                                        <div className='clear'></div>
                                    </div>
                                    <div className='sjs-input-box' >
                                        <input type="text" placeholder='年销售额' className='left' name='turnover' value={turnover} onChange={(e) => this.setNum(e)} />
                                        <span className='right'>万元</span>
                                        <div className='clear'></div>
                                    </div>
                                    <div className='sjs-input-box position' style={{ margin: '0px', right: '0', top: '0' }}>
                                        <input type="text" placeholder='目标完成率' />
                                    </div>
                                    <div className='sjs-input-box'>
                                        <input type="text" placeholder='产品' />
                                    </div>
                                    <div className='sjs-input-box'>
                                        <select name="" id="">
                                            <option value="">
                                                销售对象
                                            </option>
                                        </select>
                                    </div>
                                    <div className='sjs-input-box position'>
                                        <input type="text" placeholder='销售方式' style={{ margin: '0px', bottom: '0', right: '0' }} />
                                    </div>
                                </div>
                            </div>
                            <div className='add'>
                                <div className='add_table'>
                                    <input type="checkbox" />
                                    <p>添加更多描述</p>
                                </div>
                                <div className='add_text'>
                                    <textarea name="text2" id="" cols="80" rows="3" value={text2} onChange={(e) => this.setNum(e)}></textarea>
                                </div>
                                {/* 保存取消 */}
                                <div className='btn2'>
                                    <span className="btn2_block" onClick={() => this.save()}>保存</span>
                                    <span>取消</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}
export default jing
